import { Dropdown, MenuProps } from 'antd'
import { Avatar } from "antd"
import { useNavigate } from 'react-router-dom';

function Toux() {
    const token =localStorage.getItem('token')
    const nav=useNavigate()
    
    const items: MenuProps['items'] = [
        {
          key: '1',
          label: (
            <a target="_blank" rel="noopener noreferrer" onClick={()=>nav('/backendhome')}>
               后端管理
            </a>
          ),
        },
        {
          key: '2',
          label: (
            <a target="_blank" rel="noopener noreferrer" onClick={()=>{
                localStorage.clear('token')
                localStorage.clear('name')
                localStorage.clear('img')
                nav('/login')
            }}>
             退出登录
            </a>
          ),
        },
        {
          key: '3',
          label: (
            <a target="_blank" rel="noopener noreferrer" onClick={()=>nav('/home')}>
               前端管理
            </a>
          ),
        },
      ];
  return (
    <div>
       <Dropdown menu={{ items }} placement="bottomLeft">
        <div><div style={{display:'flex'}}>
        <span>{token?<Avatar size={44} src={localStorage.getItem('img')}/>:<Avatar size={64} src=''/>}</span>
        <span style={{marginLeft:'10px'}}>{token?localStorage.getItem('name'):'未登录'}</span>
      </div></div>
      </Dropdown>
    </div>
  )
}

export default Toux
